﻿<section class="right fl">
	<div class="main_separate"></div>
	
	<div class="regis_steps">
		<ul class="gen">
			<li class="">
				<span>Giỏ hàng</span>
			</li>
			<li class="active">
				<span>Chọn hình thức nhận hàng</span>
			</li>
			<li class="arrow_finish">
				<span>Hoàn tất</span>
			</li>
		</ul>
	</div>


	<div class="cartStep2 cartStep" style="display: block; margin-top: 20px;">
		<div class="regis_box">
			<div class="regis_box_title">Hình thức nhận hàng</div>
			<div class="cart_receive_title">
				<span>
					<input type="radio" data-bind="checked: receiveAt" value="1" name="receiveType">
				</span>
				<span class="cart_bg_receive">nhận hàng trực tiếp tại cửa hàng</span>
			</div>
			<div class="cart_receive_branch">
				<div class="branch_line">
					<div class="branch_txt fl">
						Cửa hàng duy nhất: 288 Lê Đại Hành - P.15 - Q.10 - Tp.HCM
						<br>
						Điện thoại: (08) 66 75 15 15 
						
					</div>
					<br>
				</div>
			</div>
			<div class="cart_receive_title">
				<span>
					<input type="radio"  data-bind="checked: receiveAt" value="2" name="receiveType">
				</span>
				<span class="cart_bg_receive">nhận hàng tận nơi</span>
			</div>
			
			<div id="receiverInfo">
				<div class="order_box_title">Thông tin người nhận</div>
				<div class="regis_line">
					<div class="fl regis_line_txt">
						Họ và tên
						<font color="red">(*)</font>
					</div>
					<div class="fl">
						<input type="text" data-bind="value: userName" value="Bùi Quang Tín" name="info_name" id="user_input_name" />
					</div>
					<div class="clr"></div>
				</div>
				<div class="regis_line">
					<div class="fl regis_line_txt">
						Điện thoại
						<font color="red">(*)</font>
					</div>
					<div class="fl">
						<input type="text"  data-bind="value: userPhone" value="0989700917" name="info_phone" id="user_input_phone" />
					</div>
					<div class="clr"></div>
				</div>
				<div class="regis_line">
					<div class="fl regis_line_txt">
						Địa chỉ nhận hàng
						<font color="red">(*)</font>
					</div>
					<div class="fl">
						<input type="text"  data-bind="value: userAddress"  name="info_address" id="user_input_address" />
					</div>
					<div class="clr"></div>
				</div>
			</div>
			
			
			<div class="regis_line" style="border: 1px dashed #CCCCCC;padding: 20px 20px;">
				<div class="">Trong trường hợp muốn bổ sung bất cứ thông tin nào. Vui lòng điền vào ô ghi chú bên dưới:</div>
				<div style="margin-top:10px;">
					<textarea   data-bind="value: userOther"  name="info_description" style="width: 100%;" rows="4"></textarea>
				</div>
				<div class="clr"></div>
			</div>


			<div class="cart_btn">
				<input type="image" src="../../Content/images/btn_back.png" onclick="javascript:window.location.href='/home/ViewCart';return false;">
				<input data-bind="click: checkOut" id="btnContinueStep2" type="image" src="../../Content/images/btn_finish.png">
			</div>

		</div>
	</div>
	<div class="cartStep1 cartStep" style="margin-top: 10px;">
		<div class="regis_box_title">Sản phẩm có trong giỏ hàng</div>
		<div class="cart_table">
			<div class="cart_table_title">
				<div class="fl col col2" style="padding-top: 20px;">Sản phẩm</div>
				<div class="fl col col3"></div>
				<div class="fl col col4">Số lượng</div>
				<div class="fl col col5">Đơn giá</div>
				<div class="fl col col6">Thành tiền</div>
				<div class="fl col col1">Xoá</div>
				<div class="clr"></div>
			</div>
			<div  data-bind="foreach: CartItems">
				<div class="cart_table_line cartItemDetail">				
					<div class="fl col col2">
						<div class="fl col2_img">
							<img  data-bind="attr: { atl: ProductName, src: ImageSmall }" style="height: 72px;">
						</div>
						<div class="fl col2_txt" style="padding-top: 20px">
							<b><span data-bind="text:ProductName"></span></b>
						</div>
						<div class="clr"></div>
					</div>
					
					<div class="fl col col3"> </div>
					
					<div class="fl col col4">
						<input class="cartQuantity_421 cartQuantity cartStep1BtnInput" type="text" size="1" name="cartQuantity_421" data-bind="value: Count">
					</div>
					
					<div class="fl col col5">
						<span class="cartItemPrice_421" data-bind="text : ProductPriceView"></span>
					</div>
					
					<div class="fl col col6">
						<span class="cartItemPriceTotal_421 cartItemPriceTotal" data-bind="text:CartTotal"></span>
					</div>
					
					<div class="fl col col1">
						<input  class="btnDeleteCartItem cartStep1Btn" type="image" src=" ../../Content/images/btn_delete.png" value="421"  data-bind="click:$root.removeCart">
					</div>
					<div class="clr"></div>
					<div class="cart_line"></div>
				
				</div>
			</div>
			
			<div class="cart_table_line cartStep1Btn">
				<div class="fl col col3" style="margin-left: 385px">
					<input data-bind="visible: $root.CartItems().length > 0, click:$root.update" class="btnUpdateCart" type="button" value="Cập nhật">
				</div>
				<div class="fl col col4"> </div>
				<div class="fl col col5"></div>
				<div class="fl col col6"> </div>
				<div class="clr"></div>
			</div>

			
			<div class="cart_total">
				<span class="cart_total_txt">Tổng số tiền thanh toán</span>
				<span class="p_price">
					<span class="cartItemSum" data-bind="text:Total"></span>
					VND
				</span>
			</div>
			
			<div class="cart_btn cartStep1Btn">
				<input type="image" src="../../Content/images/btn_continue_order.png" onclick="javascript:window.location.href='/';return false;">
				<input id="btnDathang" type="image" src="../../Content/images/btn_order.png" onclick="cart_goToStep(2)">
			</div>
			
			<div class="cart_cmt" style="display: block;">
				<p> Quy trình xử lý đơn hàng của bạn được chúng tôi xử lý theo các bước sau:</p>
				<p> 1. Bạn chọn sản phẩm tại OOPDIDIDONG.VN để tiến hành đặt hàng.</p>
				<p> 2. Khi đã có Sản phẩm trong giỏ hàng, bạn hãy chọn nút "Đặt hàng"</p>
				<p> 3. Sau đó bạn chọn hình thức nhận hàng</p>
				<p> 4. Bạn chọn nút "Hoàn tất: đơn hàng của bạn sẽ được chúng tôi xử lý trong thời gian nhanh nhất.</p>
				<p>  </p>
				<p>
					<em>Cảm ơn các bạn đã ủng hộ và sử dụng các sản phẩm và dich vụ do OOPDIDIDONG.VN cung cấp.</em>
				</p>
			</div>
		</div>
	</div>
	
	
</section>

<script src="../../Scripts/knockout-3.0.0.js" type="text/javascript"></script>
<script src="../../Scripts/knockout.validation.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.fancybox.js" type="text/javascript"></script>
<script src="../../Scripts/message.js" type="text/javascript"></script>
<script src="../../Scripts/Models/Product.js" type="text/javascript"></script>
<link href="../../Content/themes/message_default.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/numeral.min.js" type="text/javascript"></script>
<script type="text/javascript">

	ko.extenders.numeric = function (target, precision) {
		//create a writeable computed observable to intercept writes to our observable
		var result = ko.computed({
			read: target,  //always return the original observables value
			write: function (newValue) {
				var current = target(),
					valueToWrite = numeral(current).format('0,0');

				//only write if it changed
				if (valueToWrite !== current) {
					target(valueToWrite);
				} else {
					//if the rounded value is the same, but a different value was written, force a notification for the current field
					if (newValue !== current) {
						target.notifySubscribers(valueToWrite);
					}
				}
			}
		}).extend({ notify: 'always' });

		//initialize with current value to make sure it is rounded appropriately
		result(target());

		//return the new computed observable
		return result;
	};

	function ShoppingCartViewModel() {
		// Data
		var self = this;
		self.CartItems = ko.observableArray();
		// Load initial state from server, convert it to Task instances, then populate self.tasks
		self.getData = function() {
			$.getJSON("/api/products/GetShoppingCart", function(allData) {
				var cartItems = $.map(allData.CartItems, function(item) { return new Cart(item); });
				self.CartItems(cartItems);

			});
		};
		// dat hang
		self.receiveAt = ko.observable("1");
		self.userName = ko.observable('Bùi Quang Tín').extend({ required: true
    });
		self.userPhone = ko.observable('0989700917').extend({ required: true ,
	    number: true
    });
		self.userAddress = ko.observable('288 Lê Đại Hành - P.15 - Q.10 - Tp.HCM ').extend({ required: true
    });
	    self.errors = ko.validation.group(self);
		self.userOther = ko.observable();
		self.selectReceive = ko.computed(function() {
			if (self.receiveAt() == 1){
				disableReceiverInfoForm();
				$("#user_input_name").val('Bùi Quang Tín');
				$("#user_input_phone").val('0989700917');
				$("#user_input_address").val('288 Lê Đại Hành - P.15 - Q.10 - Tp.HCM ');
			}	
			else {
				undisableReceiverInfoForm();
				$("#user_input_name").val('');
				$("#user_input_phone").val('');
				$("#user_input_address").val('');

				self.userName('');
				self.userPhone('');
				self.userAddress('');
			}
		}, this);

		self.getData();


		// Computed data
		self.Total = ko.computed(function () {
			var total = 0;
			var length = self.CartItems().length;
			for (var i = 0; i < length; i++) {
				total += self.CartItems()[i].getCartTotal();
			}
			return numeral(total).format('0,0');
		}, this);

		self.removeCart = function (cart) {
			$.ajax({
				url: '/api/Products/DeleteCart/' + cart.RecordId(),
				type: 'DELETE',
				contentType: "application/json; charset=utf-8",
				context: cart,
				data: {},
				success: function (results, status) {
					if (status == "success") {
						self.CartItems.remove(cart);
					}
				},
				error: function (results, status) {
					dhtmlx.alert({
						type: "alert-error",
						text: "Thất Bại!",
						title: "Thất Bại!",
						ok: "OK"
					});
				}
			});

		};

		self.update = function () {
			var ids = new Array();
			var counts = new Array();
			var length = self.CartItems().length;
            var hasError = false;
            var productNameThatError;
			for (var i = 0; i < length; i++) {
                var iCartItem = self.CartItems()[i];
//                var iError = ko.validation.group(iCartItem);
//                if(iError().length!=0){
//                    hasError = true;
//                    productNameThatError = iCartItem.ProductName;
//                    break;
//                }
				ids.push(iCartItem.RecordId);
				counts.push(iCartItem.Count);
			}
            if(hasError){
                dhtmlx.alert({
						    type: "alert-error",
						    text: "Sản phẩm " + productNameThatError + " nhập sai số lượng",
						    title: "Cảnh báo!",
						    ok: "OK"
					    });
            }else{
                var json = ko.toJSON({ 'IDs' : ids, 'Counts':counts});
			    $.ajax({
				    url: '/api/Products/PutCarts/',
				    type: 'PUT',
				    contentType: "application/json; charset=utf-8",
				    data: json,
				    success: function (results, status) {
					    if (status == "success") {
						    dhtmlx.alert({
							    text: " Cập nhật giỏ hàng thành công!",
							    title: "Thành Công!",
							    ok: "OK"
						    });
						    self.getData();
					    }
				    },
				    error: function (results, status) {
					    dhtmlx.alert({
						    type: "alert-error",
						    text: "Không thể cập nhật",
						    title: "Thất Bại!",
						    ok: "OK"
					    });
					    self.getData();
				    }
			    });
            }
			

		};


		self.checkOut = function () {
		    //var totalErrors = ko.validation.group(self);
		    var hasError = self.errors().length != 0;
            if (hasError) {
                dhtmlx.alert({
						type: "alert-error",
						text: "Dữ liệu nhập bị thiếu hoặc không đúng định dạng",
						title: "Cảnh báo!",
						ok: "OK",
						
					});
            } else {
                var obj = {
				'receiveAt': self.receiveAt,
				'name' : self.userName,
				'phone': self.userPhone,
				'address': self.userAddress,
				'other': self.userOther,
			};

			var json = ko.toJSON(obj);
			console.log(json);
			$.ajax({
				url: '/api/Products/PostCheckOut/',
				type: 'POST',
				contentType: "application/json; charset=utf-8",
				data: json,
				success: function (results, status) {
					if (status == "success") {
						dhtmlx.alert({
							text: " thành công!",
							title: "Thành Công!",
							ok: "OK",
							 callback: function(result){
								window.location.href = '/';
							}
						});
						
					}
				},
				error: function (results, status) {
					dhtmlx.alert({
						type: "alert-error",
						text: "cập nhật",
						title: "Thất Bại!",
						ok: "OK",
						callback: function(result){
								self.getData();
						}
					}); 
				}
			});
            }
			
		};
	}

	ko.applyBindings(new ShoppingCartViewModel());


	$(document).ready(function() {
		cart_goToStep(1);
		disableReceiverInfoForm();
	});
	function cart_setTabActive($tabIndex) {
		$(".gen li").removeClass("active");
		$(".gen li:eq(" + ($tabIndex - 1) + ")").addClass("active");
	}
	function cart_goToStep(stepIndex) {
		$(".cartStep").hide();
		$(".cartStep1").show();
		$(".cartStep" + stepIndex).show();
		if (stepIndex != 1) {
			$(".cartStep1Btn").hide();
			$(".cartStep1BtnInput").attr('disabled', true);
		}
		else {
			$(".cartStep1Btn").show();
			$(".cartStep1BtnInput").attr('disabled', false);
		}
		$(".cart_cmt").hide();
		//$(".cartStep"+stepIndex+" .cart_cmt").show();
		$(".cartStep1 .cart_cmt").show();
		cart_setTabActive(stepIndex);
	}
	
	function disableReceiverInfoForm() {
		$("#receiverInfo :input").attr('disabled', true);
	}
	function undisableReceiverInfoForm() {
		$("#receiverInfo :input").attr('disabled', false);
	}
	
</script>